<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>animation拆分写法</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: pink;
      /* 动画名称 */
      animation: change 3s ease infinite alternate;
      /* 速度曲线: linner匀速 ease 两头慢中间快 */
      /* 两个时间: 1️⃣ 动画时长 2️⃣ 延时时间*/
      /* 播放次数: 重复次数/infinite无限次*/
      /* 开启反向:  alternate*/
      /* 结束状态: forwards最后一帧的状态 / backwards默认为初始状态 */
    }

    .box:hover {
      /* 暂停动画 */
      animation-play-state: paused;
    }


    /* 宽度从 200 变化到 800 */
    @keyframes change {
      0% {
        width: 200px;
      }

      100% {
        width: 1420px;
      }
    }
  </style>
</head>

<body>
  <div class="box">
    <h1 style="text-align: center;">Lollipop茵</h1>
  </div>
</body>

</html>